<template>
    <footer>
        <ul>
            <li class="godown">
                <ol>
                    <li>
                    <div :class="['iconfont icon-gouwuche-xuanzhong',{active:cartBlock}]" @click="setCartBlock()"></div>
                        <div>￥{{totalPrice}}</div>
                    </li>
                    <li>另需配送费￥4元</li>
                </ol>
            </li>
            <li class="buy">￥20元起送</li>
        </ul>
        <div v-show="cartBlock">
            <div class="carts">
                <div class="head">
                    <p>购物车</p>
                    <p @click="clearCart()">清空</p>
                </div>
                <div>
                    <div class="info" v-for=" ( item ) in cartList " :key=" item.name ">
                        <div>
                            <p>{{item.name}}</p>
                            <div>
                                <p class="price">
                                    <!-- item.num*item.price -->
                                    <span>￥</span><span>{{item.count*item.price}}</span>
                                </p>
                                <div class="num">
                                    <countVue :food="item"></countVue>
                                </div>
                            </div>
                        </div>
                    </div>    
                </div>
                
            </div>
        </div>
    </footer>
</template>

<script>
import countVue from '../components/count.vue';
import { mapState } from 'vuex'
    export default {
        data(){
            return{
                cartBlock: false,
            };
        },
        components: {
            countVue,
        },
        computed: {
            ...mapState(['goods']),
            cartList(){
                let list = [];
                let num = 0 ;
                this.goods.forEach( ( itme ) => {
                    itme.foods.forEach(( food )=>{
                        if( food.count > 0 ){
                            list.push( food );
                            // console.log(  );
                            // num += food.price*food.count;
                        }
                    });
                });
                return list ;
            },
            totalPrice(){
                let num = 0 ;
                this.cartList.forEach((item)=>{
                    num += item.count*item.price
                });
                return num ;
            }

        },
        methods:{
            clearCart(){
                this.cartList.forEach(( item )=>{
                    item.count = 0 ;
                });
            },
            setCartBlock(){
                this.cartBlock = !this.cartBlock
            }
        }
    }
</script>

<style scoped>
footer>ul{
    height: 20vw;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    color: #97989c;
    z-index: 10;
}
footer>ul>li{
    height: 20vw;
    line-height: 20vw;
}
footer .godown{
    flex: 5;
    background-color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
footer ol{
    display: flex;
    height: 10vw;
    font-size: 3vw;
}
footer ol>li{
    line-height: 10vw;
}
footer ol>li:first-child{
    border-right: 1px solid #97989c;
    margin-right: 5vw;
    display: flex;
    position: relative;
}
footer ol>li:first-child>div:first-child{
    /* font-weight: bold; */
    background-color: #2b343d;
    line-height: 18vw;
    text-align: center;
    width: 18vw;
    height: 18vw;
    border-radius: 50%;
    font-size: 8vw;
    position: absolute;
    bottom: 0;
    border: 2vw solid #131d26;
}
ol>li:first-child>div:last-child{
    margin-left: 22vw;
    font-weight: bold;
    padding-right: 3vw;
    font-size: 5vw;
}


.buy{
    flex: 2;
    font-weight: bold;
    background-color: #2b343b;
    text-align: center;
}
.active{
    background-color: #00a0dc !important;
    color: white !important;
}


footer>div{
    width: 100vw;
    height: 158vw;
    background-color: rgba(0, 0, 0, .5);
    position: fixed;
    top: 0vw;
    left: 0vw;
}
footer .carts{
    width: 100vw;
    height: 66vw;
    background-color: white;
    position: absolute;
    bottom: 0vw;
}
footer .carts>div:last-child{
    overflow: auto;
    height: 56vw;
}
.carts .head{
    height: 10vw;
    background-color: #f4f5f7;
    display: flex;
    justify-content: space-between;
    border-bottom: 1vw solid #d9dde0;
}
.carts .head>p{
    width: 20vw;
    text-align: center;
    line-height: 10vw;
}
.carts .head>p:last-child{
    color: #059fe9;
}
.carts .info{
    width: 100vw;
    height: 14vw;
}
.carts .info>div{
    height: 13vw;
    width: 92vw;
    line-height: 13vw;
    margin: 0 4vw;
    border-bottom: 1vw solid #e8e8e8;
    display: flex;
    justify-content: space-between;
}
.carts .info>div>div{
    width: 42vw;
    display: flex;
    justify-content: space-between;
    position: relative;
}
.carts .price{
    color: #f41518;
}
.carts .price>span:last-child{
    font-size: 5vw;
    font-weight: bold;
}
.carts .num{
    width: 28vw;
    display: flex;
    position: absolute;
    top: 3vw;
    right: 0vw;
}
.carts .num>p{
    width: 7vw;
    height: 7vw;
    line-height: 7vw;
    text-align: center;
}
.carts .num>p:not(:nth-child(2)){
    border-radius: 50%;
}
.carts .num>p:nth-child(2){
    width: 14vw;
}
.carts .num>p:first-child{
    box-sizing: border-box;
    border: 1vw solid #05a0e0;
    color: #05a0e0;
    font-size: 7vw;
    line-height: 4vw;
    font-weight: bold;
}
.carts .num>p:last-child{
    box-sizing: border-box;
    border: 1vw solid #05a0e0;
    background-color: #00a0dc;
    color: white;
    font-size: 4vw;
    line-height: 5vw;
    font-weight: bold;
    position: absolute;
    right: 0vw;
}
</style>